<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    <title>盒子布局示例</title>
    <style>
        #container {
            display: -moz-box;
            display: -webkit-box;
        }

        #left-sidebar {
            width: 200px;
            padding: 20px;
            background-color: orange;
        }


        #contents {
            width: 300px;
            padding: 20px;
            background-color: yellow;
        }

        #right-sidebar {
            width: 200px;
            padding: 20px;
            background-color: limegreen;
        }


        #contents,
        #left-sidebar,
        #right-sidebar {
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="left-sidebar">
            <h2>左侧边栏</h2>
            <ul>
                <li><a href="">超链接</a></li>
                <li><a href="">超链接</a></li>
                <li><a href="">超链接</a></li>
                <li><a href="">超链接</a></li>
                <li><a href="">超链接</a></li>
            </ul>
        </div>

        <div id="contents">
            <h2>内容</h2>
            <p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示
                例文字示例文字。示例文字示例文字示例文字示例文字示例文字示例文字示例文
                字示例文字示例文字示例文字。示例文字示例文字示例文字示例文字示例文字示
                例文字示例文字示例文字示例文字示例文字。示例文字示例文字示例文字示例文
                字示例文字示例文字示例文字示例文字示例文字示例文字。</p>
        </div>

        <div id="right-sidebar">
            <h2>右侧边栏</h2>
            <ul>
                <li><a href="">超链接</a></li>
                <li><a href="">超链接</a></li>
                <li><a href="">超链接</a></li>
            </ul>
        </div>
    </div>
</body>

</html>